<div class="modal fade in ip-box overflow-y-hidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true"
  id="{{model.id}}">
  <div class="modal-dialog modal-lg" role="document" style="margin:254px auto;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="reset()">×</button>
        <h4 class="modal-title" id="myModalLabel">数据库管理 — 创建表</h4>
      </div>
      <div class="modal-body modal-body680 database-model">
        <form #newlyAddedForm="ngForm" (ngSubmit)="submitNewlyAdded(newlyAddedForm.value)" *ngIf="tables">
          <input type="text" name="tableId" class="hide" #tableId=ngModel [(ngModel)]="tables?.tables.tableId"/>
          <div class="form-group col-sm-6">
            <label class="col-xs-12 col-sm-2 control-label text-right">表名：</label>
            <div class="col-xs-12 col-sm-10">
              <input type="text" name="tableName" class="form-control" maxlength="30" autocomplete="off" required #tableName=ngModel [(ngModel)]="tables.tables.tableName" placeholder="请输入表名"
                pattern="^(?![0-9]*$)[a-zA-Z0-9_]{1,31}$" />
                <!-- ^[a-zA-Z\d\u4E00-\u9FA5_\D]+$ -->
                <label class="red required" style=" right: -10px;">*</label>  
              <div *ngIf="tableName.invalid && (tableName.touched)" class="error-alert">
                <div *ngIf="tableName.errors.required">
                  <small class="error">请输入表名</small>
                </div>
                <small class="error" *ngIf="tableName.errors?.pattern ">不能输入:纯数字/汉字/特殊符号,允许输入_</small>
              </div>
            </div>
          </div>
          <div class="form-group height-auto col-sm-6">
            <label class="col-xs-12 col-sm-2 control-label text-right">注释：</label>
            <div class="col-xs-12 col-sm-10">
              <!-- <textarea rows="5" type="text" name="table_desc" class="form-control" ngModel placeholder="注释">
              </textarea> -->
              <input type="text" name="tableDesc" class="form-control" maxlength="50" autocomplete="off" #tableDesc=ngModel [(ngModel)]="tables.tables.tableDesc" placeholder="请输入注释"/>
            </div>
          </div>
          <div class="col-sm-12 form-group">
            <button type="button" class="btn btn-default addl" (click)="addTr()">
              <span class="glyphicon glyphicon-plus"></span> 列
            </button>
          </div>
          <div class="col-sm-12 form-group">
            <div class="l-table">
              <div class="table-header">
                <table class="table table-bordered table-header game-table">
                  <thead>
                    <tr>
                      <td class="w5 text-center">序号</td>
                      <td class="w25 text-center max-w" title="列名(不能以数字开头)">列名(不以数字开头)</td>
                      <td class="w15 text-center">类型</td>
                      <td class="w10 text-center">长度</td>
                      <td class="w10 text-center">小数点</td>
                      <td class="w10 text-center">是否为null</td>
                      <td class="w10 text-center">是否主键</td>
                      <!-- <td class="w10 text-center">排序值</td> -->
                      <!-- <td class="w10 text-center">默认</td> -->
                      <td class="w15 text-center">操作</td>
                    </tr>
                  </thead>
                </table>
              </div>
              <div class="table-body">
                <table class="table table-bordered table-header game-table">
                  <tbody>
                    <tr *ngFor="let val of terminals; let  i = index;" [ngClass]="{'active':i%2!=0}">
                      <td class="w5 text-center">{{i+1}}</td>
                      <td class="w25 text-center" style="position: relative;">
                        <input class="form-control" placeholder="请输入列名" name="columeName" type="text" [class.erinput]="terminals[i].columeName != '' && !columeNametf" value="{{val.columeName}}" (input)="nameChange($event, val)"/>
                        <!-- <small class="error" *ngIf="!columeNametf">不能输入:纯数字/汉字/特殊符号,允许输入_</small> -->
                        
                      </td>
                      <td class="w15 text-center">
                        <select name="type" *ngIf="typelist" value="{{val.columeType}}" (change)="typeChange($event, val,i)">
                          <option *ngFor="let item of typelist">
                            <input class="hide" type="text" name="columeType"  #columeType="ngModel" [(ngModel)]="item.name">
                            {{item.name}}
                          </option>
                        </select>
                      </td>
                      <td class="w10 text-center">
                        <input class="form-control" *ngIf="val.columeLengthtf == 1"  name="columeLength" type="number" value="{{val.columeLength}}" (input)="lengthChange($event, val)" />
                        <p class="details-p" *ngIf="val.columeLengthtf == 0">{{val.columeLengthtf}}</p>
                      </td>
                      <td class="w10 text-center">
                        <input class="form-control" *ngIf="val.columeXsdtf == 1" maxlength="5" name="columeXsd" type="number" value="{{val.columeXsd}}" (input)="xsdChange($event, val)" />
                        <p class="details-p" *ngIf="val.columeXsdtf == 0">{{val.columeXsd}}</p>
                      </td>
                      <td class="w10 text-center">
                        <!-- <input class="form-control" name="not_null" type="text" value="{{val.column_not_null}}" (input)="notnullChange($event, val)"> -->
                        <div class="divflex">
                          <label class="toggle toggle-positive" [ngClass]="{ 'active': val.columeNotNull,'unactive': !val.columeNotNull}">
                            <input type="checkbox" name="columeNotNull" #columeNotNull=ngModel [(ngModel)]="val.columeNotNull"/>
                            <div class="track" >
                                <div class="tit" *ngIf="val.columeNotNull">是</div>
                                <div class="tit right" *ngIf="!val.columeNotNull">不是</div>
                                <div class="handle"></div>
                            </div>
                          </label>
                        </div> 
                      </td>
                      <td class="w10 text-center">
                          <!-- <input class="form-control" name="not_null" type="text" value="{{val.column_not_null}}" (input)="notnullChange($event, val)"> -->
                          <div class="divflex">
                            <label class="toggle toggle-positive"  [ngClass]="{ 'active': val.primaryKey,'unactive': !val.primaryKey}">
                              <input type="checkbox" name="primaryKey" (ngModelChange)="primaryKeymin(i)" #primaryKey="ngModel" [(ngModel)]="val.primaryKey" />
                              <div class="track">
                                  <div class="tit" *ngIf="val.primaryKey">是</div>
                                  <div class="tit right" *ngIf="!val.primaryKey">不是</div>
                                  <div class="handle"></div>
                              </div>
                            </label>
                          </div> 
                        </td>
                      <!-- <input class="" name="columeOrder" type="text" value="{{i}}" [(ngModel)]="val.columeOrde"  (ngModelChange)="orderChange($event,val,i)"> -->
                      <!-- <td class="w10 text-center">
                        <input class="hide" name="columeOrder" type="text" value="{{i+1}}"  (input)="orderChange($event,val)">
                        <p class="details-p">{{i+1}}</p>
                      </td> -->
                      <!-- <td class="w10 text-center">
                        <input class="form-control" name="default" type="text" value="00{{(i+1)}}" (input)="defaultChange($event,val)">
                      </td> -->
                      <td class="w15 text-center icon-td" style="padding-left: 10px;">
                        <span class="btn-i" title="上移" (click)="upDown(0,i,terminals)">
                            <img width="16px" height="16px" src="../assets/right-product/top.png">
                        </span>
                        <span class="btn-i" title="下移" (click)="upDown(1,i,terminals)">
                            <img class="trans" width="16px" height="16px" src="../assets/right-product/top.png">
                        </span>
                        <span class="btn-i" title="删除" (click)="deletetr(i)">
                          <img width="16px" height="16px" src="../assets/right-product/detele2.png">
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="line-public database-line-public"></div>
          <div class="col-sm-12">
            <div class="modal-footer">
              <button type="button" class="btn btn-fff" data-dismiss="modal" (click)="reset()">取消</button>
              <button type="submit" class="btn btn-primary" [disabled]="newlyAddedForm.invalid || !columeNametf"><span class="glyphicon glyphicon-plus"></span> {{model.name}}</button>
            </div>
          </div>
        </form>
        
      </div>
      
    </div>
  </div>
</div>